/*
  Tab切换组件
 */

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Tab切换",
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 用DefaultTabController包裹Scaffold
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          leading: IconButton( // 左侧按钮
            icon: Icon(Icons.ac_unit_outlined),
            color: Colors.deepOrange,
            padding: EdgeInsets.only(left: 16.0),
            onPressed: () {
              print('you haha');
            },
          ),
          actions: [ // 右侧按钮,可以有多个
            Icon(Icons.search, color: Colors.amber)
          ],
          backgroundColor: Colors.white,
          centerTitle: true,
          title: Text(
            'Tab切换',
            textDirection: TextDirection.ltr,
            style: TextStyle(color: Colors.black, fontSize: 14),
          ),
          bottom: TabBar(
            indicatorColor: Colors.lightBlue,
            labelColor: Colors.lightBlue,
            unselectedLabelColor: Colors.black,
            indicatorSize: TabBarIndicatorSize.label,   // 设置为和文字宽度相同
            labelPadding: EdgeInsets.zero,
              indicatorPadding: EdgeInsets.only(bottom: 10),
              indicator: UnderlineTabIndicator(
                borderSide: BorderSide(width: 2, color: Colors.red),
                // insets: EdgeInsets.only(bottom: 8),
              ),
              // indicator: ShapeDecoration(
              //   shape: RoundedRectangleBorder(
              //     borderRadius: BorderRadius.circular(8),
              //   ),
              //   color: Colors.cyan.shade200,
              // ),
            // isScrollable: true, // 如果标题过多，可以设置为true，标题滑动
            tabs: [  // 导航栏
            Tab(text: '热门'),
            Tab(text: '推荐'),
            Tab(text: '更多'),
          ],),
        ),
        // Tab的内容
        body: TabBarView(
          children: [
            Center(child: Text('热门'),),
            Center(child: Text('推荐'),),
            Center(child: Text('更多'),),
          ],
        ),
      ),
    );
  }
}
